<template>
	<view class="login">
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="messageType" :message="messageText" :duration="2000" class="message"></uni-popup-message>
		</uni-popup>
		<view class="BG"></view>
		<view class="header">
			<view class="back" @click="GoBack"><</view>
			<view class="title">登录</view>
		</view>
		<view class="container">
			<form class="login-form">
				<view class="toptip">登录</view>
				<input type="text" placeholder="用户名" v-model="username" maxlength="20">
				<input type="password" placeholder="密码" v-model="password" maxlength="20">
				<button @click.prevent="startLogin">
					<text class="tips" v-show="registerTip">用户名或密码错误</text>
					<text v-show="successTip">登录</text>
				</button>
				<button @click="goRegister">开始注册</button>
			</form>
			</view>
	</view>
</template>

<script>
import jwt from '../../components/lib/index.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
export default {
	components: {
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
	data() {
		return {
			username: '',
			password: '',
			messageText:"登录成功,欢迎你",
			messageType:"success",
			registerTip:false,
			successTip:true
			
		};
	},
	methods: {
		      open(){
		         this.$refs.popup.open()
		      },
		startLogin() {
			uni.request({
				url: 'https://www.ttzxh.icu:443/api/user/login',
				method: 'post',
				data: {
					username: this.username,
					password: this.password
				},
				success: res => {
					if (res.data.error === -1) {
						let userInfo = jwt(res.data.data.token);
						uni.setStorage({
							key: 'usernameInfo',
							data: userInfo
						});
						uni.setStorage({
							key: 'LoginToken',
							data: res.data.data.token
						});
						this.username = '';
						this.password = '';
						this.messageText="登陆成功,欢迎您"
						this.messageType="success"
						this.open()
						uni.reLaunch({
							url:"/pages/chat/chat"
						});
					} else {
						//错误提示
						this.registerTip=true
						this.successTip = false
						setTimeout(()=>{
							this.registerTip=false
							this.successTip = true
						},2000)
						this.messageText="登陆失败,可能用户名或密码错了"
						this.messageType="warn"
						this.open()
					}
				},
				fail: () => {
					//错误提示
					this.messageText="登陆失败,稍微等一会在登陆吧"
					this.messageType="error"
					this.open()
					this.username = '';
					this.password = '';
				}
			});
		},
		GoBack() {
			uni.navigateBack();
		},
		goRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	.message{
		margin: 65px 15px;
		border-radius: 5px;
	}
	.tips{
		color: red;
	}
	.BG {
		width: 100%;
		height: 100vh;
		background-image: url(../../static/img/huasheng1.jpg);
		background-size: cover;
		position: fixed;
		top: 0;
		opacity: 0.3;
		z-index: -1;
	}
	.header {
		z-index: 9;
		display: flex;
		width: 100%;
		height: 50px;
		background-color: transparent;
		position: fixed;
		justify-content: center;
		align-items: center;
		top: 0px;
		padding-top: 15px;
		box-shadow: 0 1px 5px 0px #000;
		.back {
			position: absolute;
			left: 0;
			color: #fff;
			font-size: 30px;
			font-weight: 100;
			line-height: 80px;
			margin-left: 25px;
			&:active {
				color: $uni-text-select-color;
			}
		}
		.title {
			color: #fff;
		}
	}
	.fade{
				opacity: 0;
				animation: leave .5s linear  ;
			}	
			@keyframes leave{
				0%{
					opacity: 0;
				}
				100%{
					opacity: 1;
				}
			}
		.container{
			width: 100vw;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			// box-sizing: content-box;	
	
		}
		.BG {
			width: 100%;
			height: 100vh;
			position: fixed;
			background-image: url(../../static/ada1.jpg);
			background-size: 100% 100%;
			opacity: 0.5;
			z-index: -1;
			top: 0;
			opacity: 0.5;
		}
	.toptip{
		font-size: 35px;
	}
		.login-form{
			// border-radius: 15px;
			width: 400px;
			height: 300px;
			display: flex;
			flex-direction: column;
			padding: 40px;
			text-align: center;
			position: relative;
			z-index: 100;
			overflow: hidden;
		}
		.login-form p{
			color: red;
			font-size: 12px;
			text-align: center;
		}
		.login-form::before{
			content: "";
			// border-radius: 15px;
			width: calc(100% - 20px);
			height: calc(100% - 20px);
			box-shadow: inset 0 0 0 200px rgba(255,255,255,0.25);
			position: absolute;
			top: -10px;
			left: 4px;
			z-index: -1;
			filter: blur(6px);
			overflow: hidden;
			}
			.login-form h2{
				font-size: 18px;
				font-weight: 400;
				color: #333;
			}
	
			.login-form input,.login-form button{
				margin:6px 0;
				height:36px;
				border: none;
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: 4px;
				padding: 0 14px;
				color: #333;
			}
			.login-form input::placeholder{
				color: #3d5245;
			}
			.login-form button{
				margin-top: 8px;
				background-color: rgba(57, 88, 69, .4);
				color:white;
				position: relative;
				overflow: hidden;
				cursor: pointer;
				transition: 0.4s;
			}
			.login-form button:hover{
				background-color: rgba(12, 80, 38, 0.67);
	
			}
	
			.login-form button::before,.login-form button::after{
				content:"";
				display: block;
				width: 80px;
				height: 100%;
				background-color: rgba(179, 255, 210,0.5);
				opacity: 0.5;
				position: absolute;
				left:0;
				top: 0;
				transform: skewX(-15deg);
				filter: blur(30px);
				overflow: hidden;
				transform: translateX(-100px);
			}
			.login-form button::after{
				width: 40px;
				background-color: rgba(179, 255, 210, 0.3);
				left:60px;
				filter: blur(5px);
				opacity: 0;
			}
			.login-form button:hover::before{
				transition: 1s;
				transform: translateX(320px);
				opacity: 0.7;
			}
			.login-form button:hover::after{
				transition: 1s;
				transform: translateX(320px);
				opacity: 1;
			}
			}
</style>
